import React, { Component } from 'react';  
import "./resume.scss"; 
import { technologyStack , resume } from "../../api/lxc";
import { Row, Col } from 'antd';
import RateComponent from "../technologyStack/components/rate.js";
import { Icon } from 'antd'; 

class ResumeComponent extends Component {
  constructor(props){
  	super(props);
  	this.state={
		lodingShow:false,
        mainData:{
			headerInfo:[],//顶部简介
			workExperience:[],//待过的公司
			projectList:[],//做过的项目
		},
		technologyStackData:{
			list:[],//技术栈列表
		}
  	}
  }
  componentWillMount(){
    this.setState({ lodingShow : true })//显示loding
	resume().then(res=>{
	  this.setState({
	    mainData : res.data.data, 
		lodingShow : false
	  }) 
	})
	technologyStack().then(res=>{
	  this.setState({
	    technologyStackData : res.data.data, 
		lodingShow : false
	  }) 
	})
  }	
  render() {    
    return (
      <div className="resumeConainer">
		<Icon type="setting" spin className="lodingstyle" style={{display:this.state.lodingShow?'block':'none'}}/>
	    <h3>刘学超</h3>
		<div className="resume_Warp">
			<div className="resime_headerInfo">
				{
					this.state.mainData.headerInfo.map((item,index)=>{
						return (<p key={index}>{item}</p>)
					})
				}
			</div>	
		</div>
		<h4>技术栈</h4>
		<div className="resume_Warp">
			<div className="resime_technologyStackData">
				<Row>
					{
						this.state.technologyStackData.list.map((item,index)=>{
							return (<Col className="gutter-row" md={12} key={index}>
								<div className="gutter-box">
									<div className="leftImgAndName">
										<div className="headerImg"><img src={item.img} alt=""/></div>
										<p className="p_1">{item.technicalName}</p>
									</div>
									<p className="p_2">{item.rate=="1"?"了解":item.rate=="2"?"了解":item.rate=="3"?"掌握":item.rate=="4"?"熟练掌握":item.rate=="5"?"精通":"了解"}</p> 
									<RateComponent defaultValue={item.rate}/>
								</div>
							</Col>)
						})
					}
				</Row>
			</div>	
		</div>
		<h4>工作经验</h4>
		<div className="resume_Warp">
			<div className="work_header">
				<Row>
					{
						this.state.mainData.workExperience.map((item,index)=>{
							return (<Col className="gutter-row" md={12} key={index}>
								<div className="gutter-box"> 
									<div className="work_top">
										<div className="headerImg"><img src={item.img} alt=""/></div>
										<p className="p_1">{item.workName}</p>
									</div>
									<p>担任{item.workContent} {item.time}</p>
									<div className="work_MainWork"><span>主要工作:</span>{item.MainWork}</div>
									<div className="work_technologStack"><span>技术栈:</span>{item.technologStack}</div>
								</div>
							</Col>)
						})
					}
				</Row>
			</div>	
		</div>
		{
			this.state.mainData.projectList.map((item,index)=>{
				return (<div key={index}>
					<h4>{item.name}项目</h4>
					<div className="resume_Warp progectList_conainerWarp">
						{
							item.progectList.map((itemSub,indexSub)=>{
								return (<div className="progectList_conainer" key={indexSub}> 
											<div className="progectList_left">
												<div className="projectheaderImg projectheaderImg_1"><img src={itemSub.img} alt=""/></div>
												<p className="projectName">{itemSub.projectName}</p>
												<p className="projectInfo">{itemSub.projectInfo}</p>
												<p className="projectTime">{itemSub.progectTime}</p>
												<p className="projectUrl">{itemSub.url}</p>
												<div className="projectheaderImg projectheaderImg_2"><img src={itemSub.img} alt=""/></div>
											</div>
											<div className="progectList_right">
												<div>
													<p>技术栈</p>
													{itemSub.technologStack}
												</div>	
												<div>
													<p>主要工作</p>
													{itemSub.MainWork}
												</div>	
												<div>
													<p>项目地址</p>
													<span style={{display:typeof itemSub.url=="string"}}>{itemSub.url}</span>
													<span style={{display:typeof itemSub.url!="string"}}>查看</span>
												</div>	
											</div>
										</div>)
							})
						}
					</div>
				</div>)
			})
		}
      </div>
    )
  }
} 
export default ResumeComponent;